<template>
    <el-dialog :visible.sync="dialogVisible"
               class="dialog"
               width="600px"
               title="换绑微信">
        <div class="verify-account" v-if="!validate">
            <el-tag class="tag"><i class="el-icon-info"/> 为了您的账号安全，进行敏感操作前须先验证身份。</el-tag>
            <el-form :model="queryForm" class="queryForm" label-width="120px" label-position="left">
                <el-form-item label="验证方式">
                    手机验证
                </el-form-item>
                <el-form-item label="绑定手机">
                    {{queryForm.phone}}
                </el-form-item>
                <el-form-item label="验证码">
                    <div class="phoneCode">
                        <el-input v-model="queryForm.code"
                                  size="small"
                                  style="width: 120px;margin-right: 15px;"
                                  placeholder="6位数字验证码">
                        </el-input>
                        <el-button @click="getVerifyCode('queryForm', 1005)"
                                   :disabled="queryForm.isDisabled"
                                   size="small"
                                   type="primary">{{ queryForm.buttonName }}
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="scan-code" v-if="validate">
            <ScanQrCode :redirectUrl="publicPath + '/business'" scenes="AccountSwitching"/>
        </div>
        <span slot="footer" class="dialog--footer" v-if="!validate">
            <el-button @click="closeHandle">取 消</el-button>
            <el-button type="primary" @click="confirmClickHandle">下一步</el-button>
        </span>
    </el-dialog>
</template>

<script lang="ts">
    import {Component, Prop, PropSync, Watch} from "vue-property-decorator";
    import {mixins} from "vue-class-component";
    import DialogMixin from "@/libs/index";
    import {getCode, verifyTheCode} from "@/api/sign";
    import ScanQrCode from "@/components/ScanQrCode.vue";
    const PUBLICPATH = process.env.VUE_APP_PUBLICPATH;

    @Component({
        components: {
            ScanQrCode,
        },
    })
    export default class GiveCoupons extends mixins(DialogMixin) {
        @PropSync("visible", {
            type: Boolean,
            default: false,
        })
        dialogVisible: boolean;

        @Prop({
            type: Object,
            default: () => {
                return {};
            },
        })
        userInfo;

        /** 设为团长表单数据 */
        queryForm = {
            phone: null,
            code: null,
            buttonName: "获取验证码",
            isDisabled: false,
            time: 60,
        };

        publicPath = PUBLICPATH;

        validate: boolean = false;

        @Watch("dialogVisible")
        handleVisibleChange(v) {
            if (v) {
                this.queryForm.phone = this.userInfo.phone;
            }
        }

        // 获取验证码
        async getVerifyCode(formName, type) {
            const response = await getCode({
                phone: this[formName].phone,
                type,
            });
            const {code, data, msg} = response.data;
            if (code === 200) {
                this.$message({
                    type: "success",
                    message: "验证码已发送",
                });
            } else {
                this.$message({
                    message: "获取失败,请重新获取",
                    type: "warning",
                    center: true,
                });
            }
            this[formName].isDisabled = true;
            const interval = window.setInterval(() => {
                this[formName].buttonName = `${this[formName].time}秒后重新发送`;
                --this[formName].time;
                if (this[formName].time < 0) {
                    this[formName].buttonName = "重新发送";
                    this[formName].time = 60;
                    this[formName].isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);
        }

        async confirmClickHandle() {
            try {
                const response = await verifyTheCode({
                    phone: this.queryForm.phone,
                    code: this.queryForm.code,
                    type: 1005,
                });
                const {code} = response.data;
                if (code === 200) {
                    this.validate = true;
                } else {
                    this.$message({
                        type: "warning",
                        message: "请重新验证信息！",
                    });
                }
            } catch (e) {
                this.$message({
                    type: "warning",
                    message: e,
                });
            }
        }

    }
</script>

<style scoped lang="scss">
    .el-tag {
        display: block;
        padding: 15px;
        height: auto;
        margin-bottom: 20px;
    }
</style>
